<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="宠物名称">
      <el-input v-model="formInline.name" placeholder="店铺名称"></el-input>
    </el-form-item>
    <el-form-item label="状态" >
      <el-select v-model="formInline.state" placeholder="状态"  label-width="20px">
        <el-option label="上架" value="1"></el-option>
        <el-option label="下架" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onAdd">添加</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="寻主编号" />
    <el-table-column prop="name" label="宠物姓名" />
    <el-table-column prop="saleprice" label="宠物售价" />
    <el-table-column prop="costprice" label="成本价"/>
    <el-table-column prop="resources" label="资源路径">
    <template #default="scope">
      <el-image
          style="width: 100px; height: 100px"
          :src="scope.row.resources"
          :fit='fits[0]'
      ></el-image>
    </template>
    </el-table-column>
    <el-table-column prop="state" label="状态">
      <template #default="scope">
        <span v-if="scope.row.state===1" style="color: blue">上架</span>
        <span v-if="scope.row.state===0" style="color: red">下架</span>
      </template>
    </el-table-column>
    <el-table-column prop="type.name" label="宠物类型" />
    <el-table-column prop="offsaletime" label="下架时间" />
    <el-table-column prop="onsaletime" label="上架时间" />
    <el-table-column prop="shop.name" label="店铺名字" />
    <el-table-column prop="user.username" label="用户名称" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
        >编辑</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
        v-model:currentPage="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[5,10,20,50]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
  <el-dialog v-model="dialogFormVisible" title="添加和编辑寻主信息">
    <el-form :model="form">
      <input type="hidden" v-model="form.id">
      <input type="hidden" v-model="form.sid">
      <el-form-item label="宠物名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物售价" :label-width="formLabelWidth">
        <el-input v-model="form.saleprice" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物成本价" :label-width="formLabelWidth">
        <el-input v-model="form.costprice" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="资源路径" :label-width="formLabelWidth">
        <el-input v-model="form.resources" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-select v-model="form.state" placeholder="状态"  label-width="20px">
          <el-option
              v-for="item in stateName"
              :key="item.name"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="宠物类型" :label-width="formLabelWidth">
        <el-select v-model="form.type" placeholder="状态"  label-width="20px">
          <el-option
              v-for="item in typeName"
              :key="item"
              :label="item"
              :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="下架时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.offsaletime"
            type="date"
            placeholder="日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="上架时间" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.onsaletime"
            type="date"
            placeholder="日期"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="店铺名称" :label-width="formLabelWidth">
        <el-input v-model="form.shop" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="form.user" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物年龄" :label-width="formLabelWidth">
        <el-input v-model="form.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物毛色" :label-width="formLabelWidth">
        <el-input v-model="form.coat_color" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="宠物性别" :label-width="formLabelWidth">
        <el-select v-model="form.gender" placeholder="状态"  label-width="20px">
          <el-option
              v-for="item in GenderName"
              :key="item.name"
              :label="item.name"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogSave"
        >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import {onMounted,ref,reactive} from "vue";
import {loadAll, update, deleted, add, selAllPetType} from "@/api/pet";
import { ElMessageBox, ElMessage} from 'element-plus'

export default {
  // components: {Index},
  setup() {
    const shop = reactive({id:'',name:''})
    const user = reactive({id:'',username:''})
    const uploadSuccess = (response) => {
      form.logo = response.data.fullPath
    }
    const fileList = ref([])

    const handleRemove = (file, fileList) => {
      console.log(file, fileList)
    }
    const handlePreview = (file) => {
      console.log(file)
    }
    const fits = ['fill', 'contain', 'cover', 'none', 'scale-down']
    const url = ''
    const stateName = ref([
      {
        'id':0,
        'name':"下架"
      },
      {
        'id':1,
        'name':"上架"
      },
    ])
    const GenderName = ref([
      {
        'id':0,
        'name':"女"
      },
      {
        'id':1,
        'name':"男"
      },
    ])
    const typeName = ref([])
    const type = reactive({id:''})
    const options1 = ref([])
    const onAdd = () => {
      selAllPetType().then(res=>{
        console.log(res.data)
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          typeName.value[i] = options1.value[i].name
        }
        Array.from(new Set(typeName.value))
        typeName.value = Array.from(new Set(typeName.value))
      })
      form.id = null
      form.name = null
      form.saleprice = null
      form.costprice = null
      form.resources = null
      form.state = null
      form.type = null
      form.offsaletime = null
      form.onsaletime = null
      form.shop = null
      form.user = null
      form.age = null
      form.coat_color = null
      form.gender = null
      dialogFormVisible.value = true
    }
    const formInline = reactive({
      name: '',
      state:''
    })
    const onSubmit = () => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":pageSize4.value,
        'name':formInline.name,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }

    const dialogSave = () => {
      dialogFormVisible.value = false
      for (let i = 0; i < options1.value.length; i++) {
        if(options1.value[i].username === form.admin){
          type.id = options1.value[i].id
        }
      }
      console.log(options1.value[0])
      console.log(type)
      if(form.id!=null){
        update({
          'id':form.id,
          'name':form.name,
          'saleprice':form.saleprice,
          'costprice':form.costprice,
          'resources':form.resources,
          'state':form.state,
          'type':type,
          'offsaletime':form.offsaletime,
          'onsaletime':form.onsaletime,
          'shop':shop,
          'user':user,
          'searchMsg':{
            'id':form.sid,
            'age':form.age,
            'gender':form.gender,
            'coat_color':form.coat_color,
          }
        }).then(res=>{
          if(res.success){
            for (let i = 0; i < tableData.value.length; i++) {
              if(tableData.value[i].id === form.id){
                tableData.value[i].name = form.name
                tableData.value[i].saleprice = form.saleprice
                tableData.value[i].costprice = form.costprice
                tableData.value[i].resources = form.resources
                tableData.value[i].state = form.state
                tableData.value[i].type.name = form.type
                tableData.value[i].offsaletime = form.offsaletime
                tableData.value[i].onsaletime = form.onsaletime
                tableData.value[i].shop.name = form.shop
                tableData.value[i].user.username = form.user
              }
            }
            type.id = null
            ElMessage({
              type: 'success',
              message: '修改成功',
            })
          }else{
            ElMessage({
              type: 'error',
              message: '修改失败',
            })
          }
        })
      }else {
        add({
          'name':form.name,
          'saleprice':form.saleprice,
          'costprice':form.costprice,
          'resources':form.resources,
          'state':form.state,
          'type':type,
          'offsaletime':form.offsaletime,
          'onsaletime':form.onsaletime,
          'shop':shop,
          'user':user,
          'searchMsg':{
            'age':form.age,
            'gender':form.gender,
            'coat_color':form.coat_color,
          }
        }).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
              'name':formInline.name,
              'state':formInline.state
            }).then(res=>{
              tableData.value = res.data.list
              total.value = res.data.total
              type.id = null
            })
            ElMessage({
              type: 'success',
              message: '添加成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '添加失败',
            })
          }
        })
      }

    }
    const total = ref(5)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    const form = reactive({
      id:'',
      sid:'',
      name:'',
      saleprice:'',
      costprice:'',
      resources:'',
      state:'',
      type:'',
      offsaletime:'',
      onsaletime:'',
      shop:'',
      user:'',
      age:'',
      gender:'',
      coat_color:'',
    })
    const tableData = ref('')
    const currentPage4 = ref(1)
    const pageSize4 = ref(5)
    const small = ref(false)
    const background = ref(false)
    const disabled = ref(false)
    const handleEdit = (index, row) => {
      selAllPetType().then(res=>{
        console.log(res.data)
        options1.value = res.data
        for (let i = 0; i < options1.value.length; i++) {
          typeName.value[i] = options1.value[i].name
        }
        Array.from(new Set(typeName.value))
        typeName.value = Array.from(new Set(typeName.value))
        console.log(typeName.value)
      })
      form.id = row.id
      form.name = row.name
      form.saleprice = row.saleprice
      form.costprice = row.costprice
      form.resources = row.resources
      form.state = row.state
      if(row.type!=null){
        form.type = row.type.name
      }
      form.offsaletime = row.offsaletime
      form.onsaletime = row.onsaletime
      if(row.shop!=null){
        form.shop = row.shop.name
      }
      if(row.user!=null){
        form.user = row.user.username
      }
      if(row.searchMsg!=null){
        form.sid = row.searchMsg.id
        form.age = row.searchMsg.age
        form.coat_color = row.searchMsg.coat_color
        form.gender = row.searchMsg.gender
      }
      dialogFormVisible.value = true
    }
    const handleDelete = (index, row) => {
      open(index,row)
    }
    const handleSizeChange = (val) => {
      loadAll({
        "currentPage":currentPage4.value,
        "pageSize":val,
        'name':formInline.name,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const handleCurrentChange = (val) => {
      loadAll({
        "currentPage":val,
        "pageSize":pageSize4.value,
        'name':formInline.name,
        'state':formInline.state
      }).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    }
    const open = (index,row) => {
      ElMessageBox.confirm(
          '您确定要删除此条数据吗',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        deleted(row.searchMsg.id).then(res=>{
          if(res.success){
            loadAll({
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
            }).then(
                res=>{
                  tableData.value = res.data.list
                  total.value = res.data.total
                }
            )
            ElMessage({
              type: 'success',
              message: '删除成功',
            })
          }else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            })
          }
        })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            })
          })
    }
    onMounted(()=>{
      loadAll(
          {
              "currentPage":currentPage4.value,
              "pageSize":pageSize4.value,
          }
      ).then(res=>{
        tableData.value = res.data.list
        total.value = res.data.total
      })
    })
    return{
      tableData,
      handleEdit,
      handleDelete,
      currentPage4,
      pageSize4,
      small,
      background,
      disabled,
      handleCurrentChange,
      handleSizeChange,
      form,
      dialogFormVisible,
      formLabelWidth,
      total,
      dialogSave,
      formInline,
      onSubmit,
      onAdd,
      typeName,
      type,
      options1,
      stateName,
      fits,
      url,
      fileList,
      handleRemove,
      handlePreview,
      uploadSuccess,
      shop,
      user,
      GenderName
    }
  }
}
</script>

<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block{
  margin-top: 10px;
  margin-bottom: 16px;
  width: 100%;
  text-align: center;
}
</style>
